<template>
  <div ref="node" class="bgColor">
    <slot :data="item">
      <div :style="{ height: `${item.height}px`, 'line-height': `${item.height}px` }">
        <div>{{ item.name }}</div>
      </div>
    </slot>
  </div>
</template>

<script lang="ts">
import { defineComponent } from 'vue'

export default defineComponent({
  name: 'virtual-item',
  props: {
    item: {
      required: true,
      type: Object,
      defualt: () => ({})
    },
    index: {
      type: Number
    }
  },
  mounted () {
    const el = this.$refs.node as HTMLElement
    this.$emit('update-height', { height: el.clientHeight, index: this.index })
  }
})
</script>

<style scoped lang="scss">
.bgColor {
  background: #fff;

  &:nth-child(2n) {
    background: #ccc;
  }
}
</style>
